<template>
  <div class="follow-user">
    <van-button round v-if="value" @click="handerFllow">已关注</van-button>
    <van-button round v-else type="info" @click="handerFllow">关注</van-button>
  </div>
</template>

<script>
import { followUser, cancelUser } from '../../../api/article'
export default {
  name: 'follwUserIndex',

  data() {
    return {

    };
  },
  props: {
    value: {
      type: Boolean,
      require: true
    },
    userId: {
      type: { Number, String },
      require: true
    }
  },
  mounted() {

  },

  methods: {
    async handerFllow() {
      if (this.value) {
        // 取消关注
        try {
          await cancelUser(this.userId)
          this.$emit('input', !this.value)
        } catch (error) {
          this.$toast('取消关注失败，请稍后重试')
        }
      } else {
        // 关注
        try {
          await followUser(this.userId)
          this.$toast('关注成功！')
          this.$emit('input', !this.value)
        } catch (error) {
          if (error.response && error.response.status === 400) {
            return this.$toast('不能关注自己哦！')
          }
          this.$toast('关注失败，请稍后重试')
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>